<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>待办事项 To-Do</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="app" aria-labelledby="app-title">
    <h1 id="app-title">待办事项</h1>
    <div class="topbar">
      <div class="font-box">
        <label for="app-font">字体</label>
        <select id="app-font" aria-label="应用字体"></select>
        <div class="font-advanced" aria-label="自定义字体">
          <input id="font-url" type="url" placeholder="字体文件URL" title="支持 .woff/.woff2/.ttf/.otf" />
          <button id="font-url-load" type="button">加载</button>
          <input id="font-file" type="file" accept=".woff,.woff2,.ttf,.otf" title="上传本地字体文件用于当前会话" />
        </div>
      </div>
      <div class="user-box">
        <span id="user-badge" class="user-badge">未登录</span>
        <button id="logout-btn" class="logout-btn" type="button" aria-label="退出登录">退出登录</button>
      </div>
    </div>

    <section class="content-grid" aria-label="左右布局">
      <!-- 左侧：表单 -->
      <div class="pane left">
        <section class="new-todo" aria-label="新增任务">
          <div class="form-grid">
            <div class="field wide">
              <label for="todo-input">任务内容</label>
              <textarea id="todo-input" placeholder="例如：跟进客户反馈" autocomplete="off" rows="6"></textarea>
            </div>
            <div class="field medium">
              <label for="todo-owner">担当（负责人）</label>
              <input id="todo-owner" type="text" placeholder="例如：张三" autocomplete="off">
            </div>
            <div class="field medium">
              <label for="todo-assignedAt">任务下发时间</label>
              <input id="todo-assignedAt" type="datetime-local" placeholder="选择下发时间">
            </div>
            <div class="field medium">
              <label for="todo-progress">进度</label>
              <select id="todo-progress" aria-label="进度">
                <option value="待分配">待分配</option>
                <option value="进行中">进行中</option>
                <option value="待测试">待测试</option>
                <option value="待更新">待更新</option>
                <option value="待通知用户">待通知用户</option>
                <option value="已完成">已完成</option>
              </select>
            </div>
           <div class="field medium">
              <label for="todo-type">类型</label>
              <select id="todo-type" aria-label="类型">
                <option value="日常">日常</option>
                <option value="长期">长期</option>
              </select>
            </div>
            <div class="actions-inline">
              <button id="add-btn" aria-label="添加待办">添加</button>
            </div>
        </section>
      </div>

      <!-- 右侧：筛选与列表 -->
      <div class="pane right">
        <section class="controls" aria-label="列表控制">
          <div class="filters" role="radiogroup" aria-label="完成状态筛选">
            <button class="filter" data-filter="all" aria-pressed="false">全部</button>
            <button class="filter active" data-filter="active" aria-pressed="true">未完成</button>
            <button class="filter" data-filter="completed" aria-pressed="false">已完成</button>
          </div>
          <div class="filters-advanced">
            <label for="progress-filter">按进度：</label>
            <select id="progress-filter" aria-label="进度筛选">
              <option value="all">全部</option>
              <option value="待分配">待分配</option>
              <option value="进行中">进行中</option>
              <option value="待测试">待测试</option>
              <option value="待更新">待更新</option>
              <option value="待通知用户">待通知用户</option>
              <option value="已完成">已完成</option>
            </select>
            <!-- 新增类型筛选 -->
            <label for="type-filter">按类型：</label>
            <select id="type-filter" aria-label="类型筛选">
              <option value="all">全部</option>
              <option value="日常">日常</option>
              <option value="长期">长期</option>
            </select>
          </div>
          <div class="actions">
            <button id="clear-completed" disabled>清除已完成</button>
            <button id="export-btn">导出</button>
            <button id="import-btn">导入</button>
            <input id="import-file" type="file" accept="application/json" class="sr-only">
          </div>
        </section>

        <section class="list-section">
          <ul id="todo-list" class="todo-list" aria-live="polite" aria-label="待办列表"></ul>
        </section>

        <footer class="status">
          <span id="items-left">0 条未完成</span>
        </footer>

        <section class="section backups" aria-label="备份管理">
          <div class="backup-controls">
            <button id="backup-refresh">刷新备份列表</button>
            <button id="backup-write-now">立即备份</button>
          </div>
          <ul id="backup-list" class="backup-list" aria-live="polite"></ul>
        </section>

        <section class="section sync" aria-label="跨设备同步">
          <div class="sync-form">
            <label>同步服务URL
              <input id="sync-url" type="url" placeholder="https://example.com/api/todos">
            </label>
            <label>访问令牌（可选）
              <input id="sync-token" type="password" placeholder="Bearer Token">
            </label>
            <label class="inline">
              <input id="sync-auto" type="checkbox"> 自动同步（保存时自动推送）
            </label>
            <div class="sync-actions">
              <button id="sync-push">推送到云</button>
              <button id="sync-pull">从云拉取</button>
            </div>
            <div id="sync-status" class="sync-status" aria-live="polite"></div>
          </div>
        </section>
      </div>
    </section>

    <div id="announce" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
    <div id="login-overlay" class="login-overlay" aria-modal="true" role="dialog">
      <div class="login-card">
        <h2 class="login-title">登录云同步</h2>
        <p class="login-subtitle">请输入账户以使用云端同步</p>
        <form id="login-form">
          <label for="login-username">用户名</label>
          <input id="login-username" type="text" autocomplete="username" required>
          <label for="login-password">密码</label>
          <input id="login-password" type="password" autocomplete="current-password" required>
          <div class="login-actions">
            <label class="inline"><input id="login-remember" type="checkbox" checked> 记住我</label>
            <button id="login-submit" type="submit">登录</button>
          </div>
        </form>
      </div>
    </div>
    <!-- 新增顶部右侧通知容器 -->
    <div id="toast-container" class="toast-container" aria-live="polite" aria-atomic="true"></div>
  </main>

  <script src="app.js"></script>
</body>
</html>